<template>
  <view class="content">
    <!-- 头部搜索开始 -->
    <view class="search">
      <navSearch />
    </view>
    <!-- 头部搜索结束 -->
    <!-- 分类开始 -->
    <view class="main">
			<!-- 左边开始 -->
      <view class="left">
        <view
          @click="currentClick(index)"
          class="item"
          :class="{active:currentIndex === index}"
          v-for="(item,index) in categoryList"
          :key="index"
        >{{item}}</view>
      </view>
			<!-- 左边结束 -->
			<!-- 右边开始 -->
      <scroll-view scroll-y :scroll-top="scrollTop" class="right">
        <view class="box" v-for="(item,index) in currentList" :key="item.cat_id">
          <view :class="['title',{scrolltop:index===0}]">
            <text>/</text>
            <text>{{item.cat_name}}</text>
            <text>/</text>
          </view>
          <view class="item_box">
            <navigator
              :url="'/pages/goods_list/index?id='+item2.cat_id"
              class="item"
              v-for="item2 in item.children"
              :key="item2.cat_id"
            >
              <image lazy-load :src="item2.cat_icon" />
              <text>{{item2.cat_name}}</text>
            </navigator>
          </view>
        </view>
      </scroll-view>
			<!-- 右边结束 -->
    </view>
  </view>
</template>

<script>
let allData = []
export default {
  data() {
    return {
      categoryList: [],
      currentList: [],
      currentIndex: 0,
      scrollTop: 0,
    }
  },
  onLoad() {
    // 从本地存储获取数据
    const category = uni.getStorageSync('category') || null
    // 获取当前时间
    const time = new Date()
    // 判断是否有数据存在
    if (category) {
      // 数据是否过期  时间为5min
      if (time - category.time > 300000) {
        // 过期就重新发请求
        this.getDataList()
      } else {
        // 没有过期就直接赋值
        allData = category.list
        // 分类导航
        this.categoryList = allData.map((v) => v.cat_name)
        // 产品列表
        this.currentList = allData[0].children
      }
    } else {
      // 数据不存在就发请求
      this.getDataList()
    }
  },
  methods: {
		// 封装获取数据请求
    getDataList() {
      return this
        .request({
          url: '/categories',
        })
        .then((res) => {
          allData = res
          // 存储数据
          uni.setStorageSync('category', {
            time: new Date(),
            list: allData,
          })
          // 分类导航
          this.categoryList = allData.map((v) => v.cat_name)
          // 产品列表
          console.log(allData)
          this.currentList = allData[0].children
        })
		},
		// 点击tab切换
    currentClick(i) {
      this.currentIndex = i
      this.currentList = allData[i].children
      // 每次切换都要滚动到顶部
      this.scrollTop = Math.random() / 1000
		}
  },
}
</script>

<style lang="scss">
.content {
  height: 100vh;
  display: flex;
  flex-direction: column;
  .search {
    width: 100%;
  }
  .main {
    flex: 1;
    // background: orange;
    display: flex;
    overflow: hidden;
    .left {
      width: 200rpx;
      // background:palegreen;
      overflow: auto;
      .item {
        text-align: center;
        line-height: 80rpx;
        height: 80rpx;
        // border-top: 1px solid #ddd;
        position: relative;
        background: #f5f5f5;
        font-weight: 400;

        &.active {
          color: $theme-color;
          background: #fff;
          &::after {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 6rpx;
            height: 50rpx;
            background: $theme-color;
          }
        }
      }
    }
    .right {
      flex: 1;
      // background: palevioletred;
      // overflow: auto;
      height: 100%;
      .box {
        .title {
          text-align: center;
          height: 80rpx;
          line-height: 80rpx;
          color: #666;
          text {
            &:nth-child(2) {
              color: #000;
              margin: 0 20rpx;
            }
          }
        }
        .item_box {
          display: flex;
          flex-wrap: wrap;
          .item {
            width: 33.33%;
            text-align: center;
            margin-bottom: 20rpx;
            image {
              width: 120rpx;
              height: 120rpx;
              margin: 0 auto;
            }
          }
        }
      }
    }
  }
}
</style>
